<html>

<head>
    <meta charset="utf-8">
    <title>2020年放假倒计时</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>
        @import url("https://fonts.googleapis.com/css?family=Aleo");

        :root {
            font-family: "Aleo", sans-serif;
        }

        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            /*background: rgb(119, 13, 13);*/
            /*background: radial-gradient(circle, rgba(119, 13, 13, 0.92) 64%, rgba(0, 0, 0, 0.6) 100%);*/
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        .label {
            font-size: 2.2rem;
            background: url("src/label.png");
            /*background-clip: text;*/
            -webkit-background-clip: text;
            color: transparent;
            animation: moveBg 30s linear infinite;
        }

        @keyframes moveBg {
            0% {
                background-position: 0% 30%;
            }
            100% {
                background-position: 1000% 500%;
            }
        }

        .middle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            user-select: none;
        }

        .time {
            color: #d99c3b;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
        }

        .time div {
            padding: 0 14px;
            font-size: 0.8rem;
        }

        .time div span {
            font-size: 3rem;
            min-width: 55px;
            display: inline-block;
        }

        @media (max-width: 740px) {
            .label {
                font-size: 1.7rem;
            }

            .time div {
                padding: 0 16px;
                font-size: 0.6rem;
            }

            .time div span {
                font-size: 2rem;
            }
        }
    </style>
</head>

<body>
<canvas class="fireworks" style="position:fixed;left:0;top:0;pointer-events:none;"></canvas>
<div class="middle" id="app">
    <div v-for="(item,index) in list" :key="index">
        <h1 class="label">{{item.title}}：</h1>
        <div class="time">
            <div v-if="item.dd > 0"><span>{{item.dd}}</span>天</div>
            <div v-if="item.hh > 0"><span>{{item.hh}}</span>小时</div>
            <div v-if="item.mm > 0"><span>{{item.mm}}</span>分钟</div>
            <div><span>{{item.ss}}</span>秒</div>
        </div>
    </div>
    <!--<div>-->
    <!--<h1 class="label">新年倒计时：</h1>-->
    <!--<div class="time">-->
    <!--<div><span id="d">00</span>天</div>-->
    <!--<div><span id="h">00</span>小时</div>-->
    <!--<div><span id="m">00</span>分钟</div>-->
    <!--<div><span id="s">00</span>秒</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div>-->
    <!--<h1 class="label">春节放假倒计时：</h1>-->
    <!--<div class="time">-->
    <!--<div><span id="d0">00</span>天</div>-->
    <!--<div><span id="h0">00</span>小时</div>-->
    <!--<div><span id="m0">00</span>分钟</div>-->
    <!--<div><span id="s0">00</span>秒</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div>-->
    <!--<h1 class="label">2020年倒计时：</h1>-->
    <!--<div class="time">-->
    <!--<div><span id="d1">00</span>天</div>-->
    <!--<div><span id="h1">00</span>小时</div>-->
    <!--<div><span id="m1">00</span>分钟</div>-->
    <!--<div><span id="s1">00</span>秒</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div>-->
    <!--<h1 class="label">下一波工资倒计时：</h1>-->
    <!--<div class="time">-->
    <!--<div><span id="d2">00</span>天</div>-->
    <!--<div><span id="h2">00</span>小时</div>-->
    <!--<div><span id="m2">00</span>分钟</div>-->
    <!--<div><span id="s2">00</span>秒</div>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div>-->
    <!--<h1 class="label">下班倒计时：</h1>-->
    <!--<div class="time">-->
    <!--<div><span id="d3">00</span>天</div>-->
    <!--<div><span id="h3">00</span></div>-->
    <!--</div>-->
    <!--</div>-->
</div>
<!-- import Vue before Element -->
<script src="../libs/jquery-3.4.1.min.js"></script>

<script src="../libs/anime.min.js"></script>

<script src="../libs/fireworks.js"></script>
<script src="src/vue.min.js"></script>
<!-- import JavaScript -->

<script>
    $("body").css("cursor", "url('assets/star/normal.cur'), default");
    $("a").css("cursor", "url('assets/star/link.cur'), pointer");
    new Vue({
        el: '#app',
        data: () => {
            return {
                list: [
                    {
                        "title": "对象生日倒计时",
                        "time": new Date("2019/12/19 00:00:00").getTime(),
                        "num": "00",
                        "dd": "00",
                        "hh": "00",
                        "mm": "00",
                        "ss": "00",
                    },
                    {
                        "title": "春节放假倒计时",
                        "time": new Date("2020/01/25 00:00:00").getTime(),
                        "num": "00",
                        "dd": "00",
                        "hh": "00",
                        "mm": "00",
                        "ss": "00",
                    },
                    {
                        "title": "元旦放假倒计时",
                        "time": new Date("2020/01/01 00:00:00").getTime(),
                        "num": "00",
                        "dd": "00",
                        "hh": "00",
                        "mm": "00",
                        "ss": "00",
                    },

                    {
                        "title": "工资发放倒计时",
                        "time": new Date("2019/12/15 17:00:00").getTime(),
                        "num": "00",
                        "dd": "00",
                        "hh": "00",
                        "mm": "00",
                        "ss": "00",
                    },

                ]
            }
        },
        methods: {
            forMate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
            timeStart() {
                for (let index in this.list) {
                    let endTime = parseInt(this.list[index]["time"]);
                    let nowTime = new Date();
                    let rightTime = parseInt((endTime - nowTime.getTime()) / 1000);
                    if (rightTime > 0) {
                        let dd = parseInt(rightTime / (24 * 60 * 60));
                        let hh = this.forMate(parseInt(rightTime / (60 * 60) % 24));
                        let mm = this.forMate(parseInt(rightTime / 60 % 60));
                        let ss = this.forMate(parseInt(rightTime % 60));
                        if (dd >= 0) {
                            this.list[index]["dd"] = dd;
                        }
                        if (dd >= 0) {
                            this.list[index]["hh"] = hh;
                        }
                        if (dd >= 0) {
                            this.list[index]["mm"] = mm;
                        }
                        if (dd >= 0) {
                            this.list[index]["ss"] = ss;
                        }

                        // this.list[index]["num"] = `${dd}天${hh}小时${mm}分${ss}秒`;
                    }

                }
            }
        },
        mounted() {
            setInterval(() => {
                this.timeStart();
            }, 1000);

        },

        created() {
            // let endTime = (new Date(new Date(new Date().toLocaleDateString()).getTime() + 18 * 60 * 60 * 1000)).getTime();
            // console.log(endTime)
            // this.list[3].time = endTime;

            this.timeStart();
        }
    })
</script>
</body>

</html>
